<template>
  <el-container class="main-container">
    <el-header class="header">
      <AdminHeader :site-info="siteInfo" :user-info="userInfo"/>
    </el-header>
    <el-container class="main-content">
      <el-aside class="left-menu">
        <AdminMenu :menu-click="handleMenuClick"/>
      </el-aside>
      <el-container>
        <el-main class="main">
          <slot name="main"/>
        </el-main>
        <el-footer class="footer">
          <AdminFooter/>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { useApi } from "~/composeables";

const api = useApi();
const router = useRouter();

const siteInfo : SiteInfo = {name: "未命名站点"}
const userInfo = ref<any>({name: "Andy", id: 1923812838182, realname:"开发者", roleId:12323423, roleName: "管理员"});

const loadUserInfo = ()=>{
  api.auth.getUserInfo()
    .then(res=>{
      if(res.success){
        if(res.data != null){
          userInfo.value = res.data;
        }else{
          router.push("/login");
        }
      }else{
        router.push("/login");
      }
    })
    .catch(err=>{
      console.error(err);
      router.push("/login");
    })
}

onMounted(()=>{
  nextTick(()=>{
    loadUserInfo()
  })
})

const handleMenuClick = (path:string)=>{
  useRouter().push(path);
}
</script>

<style>
:root {
  --main-background: rgba(7, 106, 182, 0.8);
  --second-background: rgba(7, 106, 182, 0.95);
  --main-header-background: #ffffff;
  --main-color-in-background: #ffffff;
  --main-font-color: #666666;
  --main-info-color: #999999;
}

.tag-success {
  color: #0cde75;
  cursor: pointer;
}

.tag-info{
  color: #666;
  cursor: pointer;
}

.tag-danger{
  color: #e5744e;
  cursor: pointer;
}

.tag-error{
  color: #f35555;
  cursor: pointer;
}


</style>

<style scoped>
.main-container{
  margin: -10px;
  padding: 2px;
  height: calc(100vh);
}

.header{
  height: 45px;
  width: 100%;
  padding: 0;
}

.left-menu {
  width: auto;
  padding: 0;
}

.footer{
  height: 45px;
}

.main-content{
  height: calc(100vh - 45px - 45px);
}
</style>

<style>
h2{
  margin: 0;
  padding: 0;
}
</style>
